/*
 * @Author: jiu yin
 * @Date: 2024-05-07 17:28:53
 * @LastEditTime: 2024-06-19 21:10:09
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\scene_member_code\component\CodeTable.tsx
 * jiu
 */
import { add_member_in, link_device_or_ticket, program_member_list, remove_member_out, top_infobox } from "@/api/home";
import pico from "@/assets/image/pico.png";
import ScanModal from "@/comment/ScanModal";
import ShowPropsConfirm from "@/comment/delete_two/index.tsx";
import User_avatar from "@/comment/user_avatar";
import { useRoute } from "@/hooks";
import { CheckCircleTwoTone } from "@ant-design/icons";
import type { ActionType } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import { Button, ConfigProvider, message, notification } from "antd";
import { useEffect, useRef, useState } from "react";
import Admission_modal from "./admission_modal";
import "./index.scss";
import Pico_modal from "./pico_modal";

export default function CodeTable(propr: any) {
	const { program_id, isModalOpenScan, detail } = propr;
	const actionRef = useRef<ActionType>(null);
	const [api, contextHolder] = notification.useNotification();

	const { back } = useRoute();

	//空闲设备
	const [idTop_info, setIdTop_info] = useState(false);
	let [top_info, setTop_info] = useState<any>({});
	useEffect(() => {
		top_infobox().then((res: any) => {
			setTop_info(res.data);
		});
	}, [idTop_info]);

	//入场票关联
	let [isModalOpen, setIsModalOpen] = useState(false);
	//设备关联
	function pico_relevancy(item: any) {
		return (
			<div className="flex   font-700">
				<img src={pico} alt="" className="w-72px h-72px " />
				<div className="ml-12px">
					<p className="c-#161940 font-700 text-14px">{item.device_name}</p>
					<p className=" c-#5C5F7A text-14px">sn：{item.device_real_sn}</p>
					<div className="pico flex items-center gap-10px font-700">
						<i className="i2"></i>
						<i className="i3"></i>
						{item.battery} %
					</div>
				</div>
			</div>
		);
	}
	let [isModalOpenPico, setIsModalOpenPico] = useState(false);

	//新增成员
	const add_member = async () => {
		await add_member_in({ program_id });
		message.success("新增成员成功");
		reload();
	};

	//删除
	const delete_fn = (item: any) => {
		ShowPropsConfirm({
			async callback() {
				await remove_member_out({ member_id: item.member_id });
				message.success("删除成功");
				reload();
			},
		});
	};
	let [detail_item, set_detail_item] = useState<any>({});

	//扫码关联入场票

	const scan_ticket = async (url: string) => {
		let params = { program_id, url };
		await link_device_or_ticket(params);
		api.open({ message: "关联成功", icon: <CheckCircleTwoTone twoToneColor="#52c41a" /> });
		reload();
	};

	const columns = [
		{
			title: "成员编号",
			dataIndex: "index",
			valueType: "indexBorder",
			width: 100,
			align: "center",
		},
		// {
		// 	title: "成员编号",
		// 	dataIndex: "member_id",
		// 	hideInSearch: true,
		// 	align: 'center',
		// },
		{
			title: "角色昵称",
			dataIndex: "char_name",
			hideInSearch: true,
			align: "center",
		},
		{
			title: "角色性别",
			dataIndex: "visualize_gender",
			hideInSearch: true,
			align: "center",
			render: (_: any, item: any) => (
				<span>{item.visualize_gender == "F" ? "女" : item.visualize_gender == "M" ? "男" : "_"}</span>
			),
		},
		{
			title: "角色数字人",
			dataIndex: "is_npc",
			hideInSearch: true,
			align: "center",
			render: (_: any, item: any) => (
				<div>
					{item.is_npc == 1 && (
						<User_avatar
							options={{
								avatar_url: item.avatar_url,
								nickname: item.nickname,
								id: item.user_id,
							}}
						/>
					)}
					{item.is_npc == 2 && "系统NPC"}
				</div>
			),
		},
		{
			title: "关联入场票",
			dataIndex: "ticket_no",
			align: "center",
			hideInSearch: true,
			render: (_: any, item: any) =>
				item.ticket_no ? (
					<div className=" text-14px">
						<p className="c-#9e9fb0">
							入场票：<span className="c-#323557">{item.ticket_no}</span>
						</p>
						<p className="c-#9e9fb0">
							订单号：<span className="c-#323557">{item.order_no}</span>
						</p>
					</div>
				) : (
					<div className="text-center font-700 cursor-pointer" onClick={() => (set_detail_item(item), setIsModalOpen(true))}>
						<p>等待扫码关联</p>
						<p className="c-#8948F9">手动关联</p>
					</div>
				),
		},
		{
			title: "关联设备",
			dataIndex: "device_sn",
			align: "center",
			hideInSearch: true,
			render: (_: any, item: any) =>
				item.device_sn ? (
					pico_relevancy(item)
				) : (
					<div
						className="text-center font-700 cursor-pointer"
						onClick={() => (set_detail_item(item), setIsModalOpenPico(true))}>
						<p>等待扫码关联</p>
						<p className="c-#8948F9">手动关联</p>
					</div>
				),
		},
		{
			title: "操作",
			valueType: "option",
			key: "option",
			render: (_: any, item: any) => [
				<a
					key="editable"
					className="c-red"
					onClick={() => {
						delete_fn(item);
					}}>
					移除
				</a>,
			],
		},
	];

	const reload = () => {
		actionRef.current && actionRef.current.reload();
		setIdTop_info(!idTop_info);
	};

	//已新增的数量
	let [total, setTotal] = useState(0);
	return (
		<section className="mt-40px">
			<div className=" flex items-center ml-24px">
				{total >= detail?.max_num ? (
					<Button onClick={() => message.warning("已达到最大成员数，请移除成员后再添加")} className="w-150px">
						已满员
					</Button>
				) : (
					<Button onClick={() => add_member()} className="w-150px">
						+ 新增成员
					</Button>
				)}

				<p className="c-#5C5F7A ml-20px">
					当前剩余可用设备 ：<span className="font-700">{top_info.idle_devices}</span>
				</p>
			</div>
			<div className="mt-20px ml--24px">
				<ConfigProvider>
					<ProTable
						columns={columns}
						actionRef={actionRef}
						request={async (params, sort, filter) => {
							let { data } = await program_member_list({
								page: params.current,
								limit: params.pageSize,
								program_id,
							});
							data.data.forEach((item: any, index: number) => (item.key = index + 1));
							setTotal(data.total);
							return {
								data: data.data,
								success: true,
								total: data.total,
							};
						}}
						rowKey="key"
						search={false}
						options={false}
						pagination={{
							pageSize: 100,
							hideOnSinglePage: true,
						}}
						dateFormatter="string"
					/>
				</ConfigProvider>
			</div>
			{isModalOpen && (
				<Admission_modal isModalOpen={[isModalOpen, setIsModalOpen]} reload={reload} detail_item={detail_item} />
			)}
			{isModalOpenPico && (
				<Pico_modal isModalOpen={[isModalOpenPico, setIsModalOpenPico]} reload={reload} detail_item={detail_item} />
			)}
			{isModalOpenScan[0] && <ScanModal isModalOpen={isModalOpenScan} scan_ticket={scan_ticket} title="扫码关联入场票/设备" />}
			{contextHolder}
			<div className="flex justify-center mt-20px">
				<Button type="primary" className="w-210px" onClick={() => back()}>
					保存
				</Button>
			</div>
		</section>
	);
}
